<script setup>
import { ref } from 'vue'
import { carListApi, carDeleteApi } from '@/apis/car.js'
import { onReachBottom, onShow, onLoad } from "@dcloudio/uni-app"
import AddBtn from '@/components/AddBtn.vue'
import { hasPermission } from '@/directives/permission'

const params = ref({
  pageNum: 1,
  pageSize: 10,
})
const carList = ref([])
// 标记是否为首次加载页面
let isFirstLoad = true
const loadStatus = ref({
  status: "loadmore",
  noMore: false,
  loading: false
})

const getData = async () => {
  if (loadStatus.value.loading) return
  loadStatus.value.loading = true
  try {
    const res = await carListApi(params.value)
    const { rows, total } = res
    if (total === 0) return

    // 处理数据，与原逻辑保持一致
    if (params.value.pageNum === 1) {
      carList.value = rows
    } else {
      carList.value = [...carList.value, ...rows]
    }

    if (rows.length < params.value.pageSize || carList.value.length >= total) {
      loadStatus.value.noMore = true
      loadStatus.value.status = "nomore"
    } else {
      loadStatus.value.status = "loadmore"
    }
    params.value.pageNum++
  } catch (error) {
    loadStatus.value.status = "loadmore"
    uni.$u.toast('获取数据失败')
  } finally {
    loadStatus.value.loading = false
  }
}

onLoad(async options => {
  await getData()
  isFirstLoad = false
})

onShow(async () => {
  if (isFirstLoad) return
  carList.value = []
  params.value.pageNum = 1
  loadStatus.value.noMore = false
  loadStatus.value.status = 'loadmore'
  await getData()
})

onReachBottom(() => {
  if (!loadStatus.value.noMore) {
    getData()
  }
})

const handleEdit = (item) => {
  const data = JSON.stringify(item)
  uni.navigateTo({
    url: `/pages/car/carInfo?data=${data}`
  })
}

const handleDelete = (val) => {
  uni.showModal({
    title: '温馨提示',
    content: `确定要删除${val.company}的数据吗?`,
    success: async res => {
      if (!res.confirm) return
      try {
        await carDeleteApi(val.id)
        carList.value = carList.value.filter(item => item.id !== val.id)
        uni.$u.toast("删除成功")
      } catch (error) {
        uni.$u.toast('删除失败')
      }
    }
  })
}

const handlerCarInfo = () => {
  uni.navigateTo({
    url: '/pages/car/carInfo'
  })
}
</script>

<template>
  <view class="vehicle-list page_container">
    <u-sticky>
      <view class="list-header">
        <text class="header-title">企业车辆信息</text>
        <text class="header-count">共{{ carList.length }}条</text>
      </view>
    </u-sticky>

    <view class="vehicle-card" v-for="(item, index) in carList" :key="index">
      <view class="vehicle-info">
        <view class="company-info">
          <text class="company-name">{{ item.company }}</text>
          <text class="company-phone">{{ item.tel }}</text>
        </view>

        <view class="vehicle-detail">
          <view class="vehicle-type">
            {{ item.color }}
          </view>
          <view class="plate-number">
            {{ item.platenumber }}
          </view>
        </view>
      </view>

      <view class="action-buttons">
        <view class="edit-btn action-btn" v-if="hasPermission('logistics:car:edit')" @click.stop="handleEdit(item)">
          <text class="btn-icon">✏️</text>
        </view>
        <view class="delete-btn action-btn" v-if="hasPermission('logistics:car:remove')" @click.stop="handleDelete(item)">
          <text class="btn-icon">🗑</text>
        </view>
      </view>
    </view>

    <!-- 添加底部数据加载状态 -->
    <view class="load-more" v-if="carList.length > 0">
      <u-loadmore :status="loadStatus.status" :show-icon="true"></u-loadmore>
    </view>

    <!-- 空状态显示 -->
    <view class="empty-state" v-if="carList.length === 0 && !loadStatus.loading">
      <text class="empty-text">暂无车辆信息</text>
    </view>
  </view>

  <AddBtn @click="handlerCarInfo" v-if="hasPermission('logistics:car:add')" />
</template>

<style lang="scss" scoped>
.vehicle-list {
  min-height: 100vh;
  background-color: #f5f7fa;

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx;

    .header-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
    }

    .header-count {
      font-size: 26rpx;
      color: #999;
    }
  }

  .vehicle-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: all 0.2s;

    .vehicle-info {
      flex: 1;
      min-width: 0;

      .company-info {
        display: flex;
        flex-direction: column;
        margin-bottom: 16rpx;

        .company-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 80%;
        }

        .company-phone {
          font-size: 24rpx;
          color: #666;
        }
      }

      .vehicle-detail {
        display: flex;
        align-items: center;

        .vehicle-type {
          font-size: 22rpx;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          margin-right: 16rpx;
          background: #f0f1ff;
          color: #5a66ff;
        }

        .plate-number {
          font-size: 26rpx;
          font-weight: 500;
          color: #333;
          letter-spacing: 1rpx;
        }
      }
    }

    .action-buttons {
      display: flex;
      margin-left: 20rpx;

      .action-btn {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 12rpx;
        transition: all 0.2s;

        .btn-icon {
          font-size: 36rpx;
        }

        &:active {
          transform: scale(0.9);
        }
      }

      .edit-btn {
        background-color: rgba(64, 158, 255, 0.1);
        color: #409EFF;

        &:active {
          background-color: rgba(64, 158, 255, 0.2);
        }
      }

      .delete-btn {
        background-color: rgba(255, 73, 73, 0.1);
        color: #FF4949;

        &:active {
          background-color: rgba(255, 73, 73, 0.2);
        }
      }
    }
  }

  // 底部加载状态样式
  .load-more {
    padding: 30rpx 0;
    text-align: center;
  }

  // 空状态样式
  .empty-state {
    padding: 100rpx 0;
    text-align: center;

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>